<template>
	<el-popover
		placement="top"
		:width="browser.isMobile?350:650"
		v-model="popoverVisible"
		popper-class="servicecard-popover"
	>
		<div class="servicecard-title">请选择卡项</div>
		<servicecard-list
			ref="list"
			v-model="selectServiceList"
			:upgrade="upgrade"
			:biz_id="biz_id"
			:multiple="multiple"
			@cancel="cancel"
			@confirm="confirm"
		/>
		<el-button
			slot="reference"
			:type="btnType"
			:style="btnStyle"
			:size="size"
			:disabled="disabled"
			@click="openAddServe"
		>
			{{ btnText }}
		</el-button>
	</el-popover>
</template>
<script>
import ServicecardList from "../servicecard-list";
import { mapState, mapGetters } from "vuex";
export default {
	name: "cl-choice-servicecard",
	components: {
		ServicecardList
	},
	props: {
		biz_id: {
			type: [Number, String],
			default: ""
		},
		disabled: {
			type: Boolean,
			default: false
		},
		// 升级
		upgrade: {
			type: Boolean,
			default: false
		},
		//多选
		multiple: {
			type: Boolean,
			default: true
		},
		btnText: {
			type: String,
			default: "添加卡项"
		},

		btnType: {
			type: String,
			default: "danger"
		},
		btnStyle: {
			type: [String, Object],
			default: "width: 200px"
		},
		size: {
			type: String,
			default: "small"
		},
		// 选中的服务列表
		value: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			popoverVisible: false,
			// 选中的服务列表
			selectServiceList: []
		};
	},
	computed: {
		...mapGetters(["browser"])
	},
	methods: {
		openAddServe() {
			this.selectServiceList = [...this.value];
			this.$nextTick(() => {
				console.log(this.selectServiceList);
				this.$refs.list.init();
			});
		},
		cancel() {
			this.popoverVisible = false;
			this.$emit("cancel");
		},
		confirm(v) {
			this.selectServiceList = v;
			this.cancel();
			this.$emit("input", v);
			this.$emit("confirm", v);
		}
	}
};
</script>
<style lang="scss" scpoed>
.servicecard-popover {
	padding: 0;
	// box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%);
	.servicecard-title {
		box-sizing: border-box;
		padding: 10px;
		font-weight: bold;
		border-bottom: 1px solid $border-main;
		color: #111;
	}
}
</style>
